import { Directive, ElementRef, Input, HostListener } from '@angular/core';

@Directive({
    selector: '[appHighlight]'
})
export class HighlightDirective {
    constructor(private el: ElementRef) { }

    @Input("appHighlight") highlightColor: string;
    @Input("defaultColor") defaultColor: string;

    @HostListener("mouseenter")
    onMouseEnter() {
        this.highlight(this.highlightColor || this.defaultColor || "red");
    }

    @HostListener("mouseleave")
    onMouseLeave() {
        this.highlight(null);
    }

    highlight(color: string) {
        this.el.nativeElement.style.backgroundColor = color;
    }
}